<template>
  <!-- 个人主页 -->
  <div class="my">
    <div class="status">
      <!-- 头部信息，登录与非登录为二种状态 -->
      <van-row>
        <van-col span="2">
        </van-col>
        <van-col span="2">
          <div v-if="user!=''">
            <!-- <div v-if="data.img==''"> -->
            <van-icon name="user-circle-o" size="30px" @click="to_change" />
            <!-- </div> -->
            <!-- <div v-else>
              <van-image class="touxiang" width="100%" :src="this.$url +'img/'+ (data.img?data.img:'redmi9.jpg')"/>
            </div> -->
          </div>
          <div v-else>
            <van-icon name="user-circle-o" size="30px" @click="to_login" />
          </div>
        </van-col>
        <van-col span="5">
          <span v-if="user!=''" @click="to_change" style="line-height: 30px;">
            <span>{{data.name}}</span>
          </span>
          <span v-else @click="to_login">登录/注册</span>
        </van-col>
        <van-col span="9"></van-col>
        <van-col span="2">
          <van-icon name="qr" size="20px" />
        </van-col>
        <van-col span="2">
          <van-icon name="setting-o" size="20px" @click="to_setting" />
        </van-col>
        <van-col span="2">
          <van-icon name="chat-o" size="20px" />
        </van-col>
      </van-row>
      <van-grid :column-num="5" :border="false" v-if="user==''">
        <van-grid-item v-for="(value,index) in list1" :key="index" :icon="value.lco" :text="value.text">
          <van-icon :name="value.ico" />
          <span class="text">{{value.text}}</span>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="5" :border="false" v-else>
        <van-grid-item v-for="(value,index) in list" :key="index" :icon="value.lco" :text="value.text">
          <span>{{value.num}}</span>
          <span class="text">{{value.text}}</span>
        </van-grid-item>
      </van-grid>
      <!-- 订单栏 -->
      <h4>我的订单</h4>
      <van-grid :column-num="5" :border="false" clickable>
        <van-grid-item v-for="(value,index) in list2" :key="index" :icon="value.ico" :text="value.text"
          :to="'/order/'+value.id">
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 推荐栏 -->
    <h4>精品推荐</h4>
    <van-grid :column-num="2" :gutter="10" :icon-size='10' clickable :center="false">
      <van-grid-item v-for="(value,index) in data_base.slice(0,14)" :key="index" @click="to_shopping(value)">
        <van-image :src="value.imgs[0]?value.imgs[0].url:this.$url +'img/redmi9.jpg'">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <p class="one">{{value.name}}</p>
        <p class="one" style="color:red">￥{{value.price}}</p>
      </van-grid-item>
    </van-grid>
    <van-popup v-model="show" position="right" :style="{ width: '100%',height:'101%' }">
      <shopping v-on:exit="show=false" :data_base='form'></shopping>
    </van-popup>
  </div>
</template>
<script>
import shopping from "./shopping.vue";
export default {
  components: { shopping },
  data() {
    return {
      data_base: "", //商品展示数据
      user: "", //是否登录
      data: "", //用户登录后存放用户信息
      list: [
        { num: "5", text: "优惠卷" },
        { num: "1", text: "红包" },
        { num: "88", text: "米金" },
        { num: "20万", text: "额度" },
        { num: "￥", text: "钱包" },
      ], //登录后显示
      list1: [
        { ico: "cash-on-deliver", text: "优惠卷" },
        { ico: "bill-o", text: "红包" },
        { ico: "balance-pay", text: "米金" },
        { ico: "balance-pay", text: "额度" },
        { ico: "paid", text: "钱包" },
      ], //非登录显示
      list2: [
        { ico: "notes-o", text: "全部订单", id: 0 },
        { ico: "paid", text: "待付款", id: 1 },
        { ico: "underway-o", text: "待发货", id: 2 },
        { ico: "logistics", text: "待收货", id: 3 },
        { ico: "chat-o", text: "待评价", id: 4 },
      ], //订单显示
      show: false,
      form: "",
    };
  },
  created() {
    this.getGoodDate();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      let sta = localStorage.getItem("sta");
      if (sta) {
        sta = JSON.parse(sta);
        if (sta.sx == 1) {
          //读取用户信息
          vm.user = sta.tel;
          let myurl = vm.$url + "user_login";
          vm.axios.post(myurl, { user: vm.user }).then(
            (res) => {
              if (res.data.data != "[]") {
                vm.data = JSON.parse(res.data.data)[0];
                // console.log(vm.data);
              }
            },
            (err) => {
              console.log("数据读取失败");
              console.log(err);
            }
          );
        }
        if (!sta.id) {
          console.log(1111);
          vm.data = "";
          vm.user = "";
        }
      }
    });
  },
  mounted() {
    //去掉宫格的背景色
    let a = document.querySelectorAll(".van-grid-item__content");
    for (let i = 0; i < a.length; i++) {
      a[i].style.backgroundColor = "rgba(0, 0, 0, 0)";
    }
  },
  methods: {
    to_change() {
      this.$router.push("/personal");
    },
    //登录按钮点击事件
    to_login() {
      this.$router.push("/login");
    },
    to_setting() {
      this.$router.push("/settings");
    },
    getGoodDate() {
      let myurl = this.$url + "goods_read";
      this.axios.post(myurl).then((res) => {
        let a = res.data.data;
        a = a.replace(/\\r\\n/g, "");
        a = a.replace(/\\/g, "");
        a = a.replace(/:"\[/g, ":[");
        a = a.replace(/\]"/g, "]");
        a = a.replace(/:"{/g, ":{");
        a = a.replace(/}"/g, "}");
        a = JSON.parse(a);
        this.data_base = a;
        this.$forceUpdate();
      });
    },
    to_shopping(a) {
      this.form = a;
      this.show = true;
    },
  },
};
</script>
<style scoped>
.my {
  height: 100%;
  overflow: auto;
}
.my::-webkit-scrollbar {
  display: none;
}
.text {
  font-size: 12px;
}
.status {
  background-image: url("../assets/my.png");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 7%;
}
.one {
  font-size: 15px;
  margin: 0;
  text-align: center;
}
.touxiang {
  border-radius: 50%;
}
</style>